import {ReactNode} from 'react'
import {Layout, SideBar, UserHeader} from '../components'

const UserLayout = ({children, sidebarIndex, padding}: { children: ReactNode, sidebarIndex: string, padding: string }) => {

    const style = {
        position: 'absolute',
        left: 0,
        right: 0,
        top: 0,
        bottom: 0,
        display: 'flex',
        flex: 1,
    }

    return (
        <Layout>
            <div className='app' style={style}>
                <UserHeader/>
                <div className='main-wrapper'>
                    <div className='main' style={style}>
                        <SideBar sidebarIndex={sidebarIndex}/>
                        <div className='cont'>
                            <div className='wrapper'>
                                {children}
                            </div>
                        </div>

                    </div>

                </div>
            </div>

            <style jsx>{`
                .app{
                    flex-direction: column;
                }

                .main-wrapper{
                    flex:1;
                    position: relative;
                }

                .main{
                    flex-direction: row;
                    background:#ccc;
                }

                .cont{
                    flex: 1;
                    position: relative;
                    background-color: white;
                    min-width: 1000px;
                    overflow:auto;
                    padding: ${padding || '1.5rem 2rem 2rem 2rem'};
                }

                .wrapper{
                    width:100%;
                }

            `}</style>
        </Layout>
    )
}

export default UserLayout